<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>Slider</title>
  <style>
    /*css reset*/
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    img {
      border: none;
      vertical-align: top;
    }

    a {
      -webkit-tap-highlight-color: transparent;
    }

    .slider,
    .slider-item,
    .slider-link,
    .slider-img {
      width: 100%;
    }

    .slider {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .items-container {
      display: flex;
      transform: translate3d(0, 0, 0);
    }

    .slider-item {
      flex-shrink: 0;
    }

    .button-container {
      margin-top: 15px;
      position: absolute;
      bottom: 20%;
      right: 5%;
    }

    button {
      height: 25px;
      border: 1px grey solid;
      padding: 0 5px;
    }

    .pagination-container {
      display: flex;
      flex-direction: row;
      margin-top: 15px;
    }

    .pagination {
      background-color: grey;
      height: 15px;
      width: 15px;
      border-radius: 100%;
      margin: 0 2px;
    }

    .pagination-active {
      background-color: blue;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div class="slider" id="slider">
    <div class="items-container" id="itemsContainer">
      <div class="slider-item">
        <a href="javascript:void(0)" class="slider-link">
          <img src="img/1.jpg" class="slider-img">
        </a>
      </div>
      <div class="slider-item">
        <a href="javascript:void(0)" class="slider-link">
          <img src="img/2.jpg" class="slider-img">
        </a>
      </div>
      <div class="slider-item">
        <a href="javascript:void(0)" class="slider-link">
          <img src="img/3.jpg" class="slider-img">
        </a>
      </div>
      <div class="slider-item">
        <a href="javascript:void(0)" class="slider-link">
          <img src="img/4.jpg" class="slider-img">
        </a>
      </div>
      <div class="slider-item">
        <a href="javascript:void(0)" class="slider-link">
          <img src="img/5.jpg" class="slider-img">
        </a>
      </div>
    </div>
    <!-- navigation -->
    <div class="button-container">
      <button class="prev" id="prev"> prev </button>
      <button class="next" id="next"> next </button>
    </div>
  </div>
</body>
<script src="js/hammer.min.js"></script>
<script src="js/slider.js"></script>

<script>
  var slider = document.getElementById('slider')
  var mySlider = new Slider(slider, {
    initIndex: 1,
    animationDuration: 200,
    hasPagination: true
  })
  var hammer = new Hammer(mySlider.itemsContainer)
  var isSwipe = false

  // 随手指滑动
  hammer.on("panmove", function (event) {
    console.log("panmove");
    console.log(event.deltaX);
    mySlider.move(event.deltaX)
  })

  // 监听滑动事件
  hammer.on("swiperight", function (event) {
    mySlider.goPrev()
  })
  hammer.on("swipeleft", function (event) {
    mySlider.goNext()
  })

  // 滑动结束，图片归位
  hammer.on("panend", function (event) {
    mySlider.moveToIndex()
  })

  // 下一页按钮事件
  next.ontouchstart = function () {
    mySlider.goNext()
  }

  // 上一页按钮事件
  prev.ontouchstart = function () {
    mySlider.goPrev()
  }

  // pagination点击事件，绑定在了父元素上
  mySlider.paginationContainer.ontouchstart = function (event) {
    // console.log(event.target.attributes.index.value);
    // 增加判断，避免点击父元素报错
    if (event.target.attributes.index) {
      var index = event.target.attributes.index.value
    }
    mySlider.moveToIndex(index)
  }
</script>

</html>